<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>
<body>
<header class="r-header">
  <nav class="navbar navbar-default container">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img src="./images/logo1.png" alt="" height="28px">  觅未创意</a>
      </div>
  
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">more<span class="caret"></span></a>
            <ul class="dropdown-menu" id="r-menu">
              <li id="menu-services">服务介绍</li>
              <li id="menu-projects">最新案例</li>
              <li id="menu-abouts">关于我们</li>
              <li id="menu-footer">联系我们</li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
</header>

<section class="r-session container-fluid" id="cover">
  <div class="container">
    <div class="card text-center">
      <p>CRE<br>
        ATIV
        <br>
        ITY.
        <br>
        <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
      </p>
</section>
<section id="services">
  <div class="container">
  <h3>服务介绍</h3>
  <div class="box"></div>
  <div class="row">
    <div class="col-md-4">
      <div class="thumbnail">
        <img src="./images/1.jpg" alt="...">
        <div class="caption">
          <h4>咨询&设计</h4>
          <p>市场调研、产品定位、品牌核心价值提炼、品牌个性与品牌形象塑造、营销传播方案等策略内容。品牌形象、视觉识别系统（VI）设计、产品包装、销售道具、广告宣传品等设计内容。品牌／产品命名、Slogan、品牌故事、广告主题、创意脚本、活动标题、推文、软文等文案内容。</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
        <img src="./images/2.jpg" alt="...">
        <div class="caption">
          <h4>电商营运</h4>
          <p>我们提供一体化电商全网运营服务，包括定制与开发，全网平台运维、咨询与增值服务等。我们构建并驱动品牌电商价值。我们深耕化妆品、时尚、服装、家居、母婴、宠物等垂直类电商领域，以国际化团队为数十家国内外知名品牌提供专业高效的品牌电商服务。</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
        <img src="./images/3.jpg" alt="...">
        <div class="caption">
          <h4>内容营销</h4>
          <p>我们通过提供优质内容和“觅未盒子”小程序为品牌提供一站式口碑内容营销服务。深耕小红书、抖音、微博、B站、微信等社交平台。合作超过1000+优质达人和群主，涵盖时尚、美妆、健身、美食、母婴等领域。覆盖超过10000+平台用户</p>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>

<section id="projects">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
           <img src="./images/s1.jpg" alt="...">
           <div class="mask"></div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
          <img src="./images/s2.jpg" alt="...">
          <div class="mask"></div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
          <img src="./images/s3.jpg" alt="...">
          <div class="mask"></div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
          <img src="./images/s4.jpg" alt="...">
          <div class="mask"></div>
        </div>
      </div>
    
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
          <img src="./images/s5.jpg" alt="...">
          <div class="mask"></div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
          <img src="./images/s6.jpg" alt="...">
          <div class="mask"></div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
          <img src="./images/s7.jpg" alt="...">
          <div class="mask"></div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
          <img src="./images/s8.jpg" alt="...">
          <div class="mask"></div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
          <img src="./images/s9.jpg" alt="...">
          <div class="mask"></div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
          <img src="./images/s10.jpg" alt="...">
          <div class="mask"></div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
          <img src="./images/s11.jpg" alt="...">
          <div class="mask"></div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
          <img src="./images/s12.jpg" alt="...">
          <div class="mask"></div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
          <img src="./images/s13.jpg" alt="...">
          <div class="mask"></div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
          <img src="./images/s14.jpg" alt="...">
          <div class="mask"></div>
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
          <img src="./images/s15.jpg" alt="...">
          <div class="mask"></div>
        </div>
      </div>
    </div>
  </div>
</section>
    

    <section id="abouts">
      <div class="container">
        <h3>关于我们</h3>
        <div class="box"></div>
        <div class="row">
          <div class="col-sm-6">
            <div class="thumbnail">
                <h1 class="wow animate__fadeInLeft">MEWE
                IDEA.COM</h1>
                <h4 class="wow animate__fadeInLeft">觅未创意™</h4>
                <p class="txt wow animate__fadeInLeft">北京市朝阳区酒仙桥路14号兆维工业园C3座<br>
                  电话：+86-10-80813586<br>
                  邮箱：business@meweidea.com</p>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="thumbnail">
              <p class="wow animate__fadeInRight">我们是领先的品牌咨询&服务平台，由各领域精英组成，包括国际4A美术指导，知名设计公司设计总监、策略总监，知名互联网公司UI负责人、技术主管；</p>
                <p class="wow animate__fadeInRight">我们是一支经验丰富、具有国际化视野和创新能力的团队；</p>
                <p class="wow animate__fadeInRight">我们坚持“与梦想者同行”，致力于成为“从中国制造到中国创造”这场变革的重要参与者。</p>
                <img src="./images/city.png" alt="" class="wow animate__fadeInRight">
            </div>
          </div>
        </div>

        <!-- 轮播图 -->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            <li data-target="#carousel-example-generic" data-slide-to="4"></li>
          </ol>
        
          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
                <div class="thumbnail">
                  <img src="./images/u1.png" alt="..." width="150px" height="150px">
                  <div class="caption">
                    <h3>杜燕 / 创意执行总监</h3>
                    <p>曾就职于法国阳狮，日本电通等知名4A广告公司；
                      服务客户：雀巢，联想，中粮，索尼爱立信，万科等；
                      擅长：品牌梳理与定位、视觉设计、包装设计</p>
                  </div>
              </div>
            </div>
            <div class="item">
              <div class="thumbnail">
                <img src="./images/u2.png" alt="..." width="150px" height="150px">
                <div class="caption">
                  <h3>张振福 / 项目负责人</h3>
                  <p>曾就职于中国知名设计公司和4A广告公司；
                    服务客户：伊利，远洋，中粮，白象，三全等；
                    擅长：品牌VI、包装设计、视觉广告</p>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="thumbnail">
                <img src="./images/u3.png" alt="..." width="150px" height="150px">
                <div class="caption">
                  <h3>Pony / 项目负责人</h3>
                  <p>曾职于国际知名4A广告公司；
                    服务客户：雀巢咖啡等；
                    擅长：插画设计、广告创意、视觉设计</p>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="thumbnail">
                <img src="./images/u4.png" alt="..." width="150px" height="150px">
                <div class="caption">
                  <h3>何春香 / 资深策略</h3>
                  <p>就职于国际知名4A广告公司；
                    服务客户：Jeep，蒙牛，拉斐尔，能量豆等；
                    擅长：品牌策略、广告策划</p>
                </div>
            </div>
            </div>
            <div class="item">
              <div class="thumbnail">
                <img src="./images/u5.png" alt="..." width="150px" height="150px">
                <div class="caption">
                  <h3>Vion / 文案总监</h3>
                  <p>曾就职于国际知名4A广告公司；
                    服务客户：京东，杜蕾斯，雀巢等；
                    擅长：广告策划、创意文案、传播推广</p>
                </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="footer" >
      <div class="mask" class="container-fluid">
         <div class="container">
          <div class="row">
            <div class="col-xs-4 col-md-2">
              <img src="./images/f1.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2">
              <img src="./images/f2.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2">
              <img src="./images/f3.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2">
              <img src="./images/f4.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2">
              <img src="./images/f5.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2">
              <img src="./images/f6.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2">
              <img src="./images/f7.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2">
              <img src="./images/f8.png" alt="">
            </div>
            <div class="col-xs-4 col-md-2">
              <img src="./images/f9.png" alt="">
            </div>
          </div>
        </div>
      </div>
      
    </section>
    <div class="bottom">
        <p>© 2016-2019 北京觅未创意科技有限公司 版权所有 京ICP备16046633号</p>
      </div>
    <script src="js/jquery.js"></script>
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="js/wow.min.js"></script>
    <script>
       var wow = new WOW({
        boxClass: 'wow',
        animateClass: 'animate__animated',
        offset: 0,
        mobile: true,
        live: true
      });
      wow.init();
      var projects=document.getElementById('projects');
      var thumbArr=projects.getElementsByClassName('thumbnail');
      var maskArr=document.getElementsByClassName('mask');
      var imgArr=projects.getElementsByTagName('img');
      var proList=['途家盛捷服务公寓','MODELAB/爱慕内衣','觉','CNZCO兴宇中科','CNZCO兴宇中科','CNZCO兴宇中科','CNZCO兴宇中科','CNZCO兴宇中科','CNZCO兴宇中科','CNZCO兴宇中科','CNZCO兴宇中科','CNZCO兴宇中科','CNZCO兴宇中科','CNZCO兴宇中科','CNZCO兴宇中科'];

      for(var i=0;i<thumbArr.length;i++){
        maskShowAndHide(thumbArr[i],maskArr[i],imgArr[i]);
        maskArr[i].innerHTML=proList[i];
      }

// 方法
      function maskShowAndHide(parent,child1,child2){
				parent.onmouseover = function(){
					child1.style.display = "block";
          child2.style.transform="scale(1.3)";

				}
        parent.onmouseout = function(){
					child1.style.display = "none";
          child2.style.transform="scale(1)";
				}
			}
//页面滚动
      $('#menu-services').click(function(event){
        $('body,html').animate({'scrollTop': $('#services').offset().top}, 1000)
      })
      $('#menu-projects').click(function(event){
        $('body,html').animate({'scrollTop': $('#projects').offset().top}, 1000)
      })
      
      $('#menu-abouts').click(function(event){
        $('body,html').animate({'scrollTop': $('#abouts').offset().top}, 1000)
      })
      $('#menu-footer').click(function(event){
        $('body,html').animate({'scrollTop': $('#footer').offset().top}, 1000)
      })
    </script>
</body>
</html>
